<template>
  <MainBanner/>
  <div class="main_container">
    <div class="main_header">
      <ul>
        <li
          @click="() => (activekey = index)"
          :class="{ active: activekey == index }"
          v-for="(item, index) in tagList"
          :key="index"
        >
          {{ item.name }}<SwapOutlined />{{ item.second }}
        </li>
      </ul>
    </div>
    <div class="main_content">
      <Row class="row_style">
        <Col :span="18">
          <UploadDragger
            v-model:fileList="fileList"
            name="file"
            class="upload_wrapper"
            :multiple="true"
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            @change="handleChange"
            @drop="handleDrop"
          >
            <p>
              <InboxOutlined class="ant-upload-drag-icon" />
            </p>
            <p class="ant-upload-text">点击添加文件或者拖拽文件到此处</p>
            <Button type="primary" class="btn_blue_style" shape="round">
              <template #icon>
                <CloudUploadOutlined />
              </template>
              点击上传
            </Button>
            <template #itemRender="{ file, actions }">
              dsad
            </template>
          </UploadDragger>
        </Col>
        <Col :span="6">
          <div class="upload_tool">
            <div class="top_block">
              <div class="good_num">
                <Statistic title="好评" :value="1128" style="text-align: center" />
                <Rate v-model:value="value" :tooltips="desc" />
              </div>
              <div class="avatar_group_box">
                <Divider class="">已转换 <Tag :bordered="false" color="processing">203201</Tag>次</Divider>
                <AvatarGroup :max-count="5" :max-style="{ color: '#f56a00', backgroundColor: '#fde3cf' }">
                    <Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2" />
                    <Avatar style="background-color: #1890ff">K</Avatar>
                    <Avatar style="background-color: #1890ff">X</Avatar>
                    <Avatar style="background-color: #1890ff">K</Avatar>
                    <Tooltip title="Ant User" placement="top">
                      <Avatar style="background-color: #87d068">
                        <template #icon><UserOutlined /></template>
                      </Avatar>
                    </Tooltip>
                    <Avatar style="background-color: #1890ff">
                      <template #icon><AntDesignOutlined /></template>
                    </Avatar>
                    <Avatar style="background-color: #1890ff">
                      <template #icon><AntDesignOutlined /></template>
                    </Avatar>
                </AvatarGroup>
              </div>
            </div>
            
            <Button class="btn_blue_style action_btn" type="primary" block>开始转换</Button>
          </div>
          <!-- <TypographyTitle :level="5">PDF</TypographyTitle> -->
        </Col>
      </Row>
    </div>
  </div>
  <About />
</template>
<script lang="ts" setup>
import {
  Button,
  Tabs,
  TabPane,
  Card,
  CardMeta,
  CardGrid,
  TypographyTitle,
  RadioGroup,
  RadioButton,
  UploadDragger,
  Flex,
  Row,
  Col,
  BadgeRibbon,
  Statistic,
  Rate,
  AvatarGroup,
  Avatar,
  Tooltip,
  Divider,
  Tag
} from "ant-design-vue";
import { SwapOutlined, InboxOutlined,CloudUploadOutlined,LikeOutlined,AntDesignOutlined,UserOutlined } from "@ant-design/icons-vue";
import type { UploadChangeParam } from "ant-design-vue";
import MainBanner from '@/layouts/MainBanner.vue'
import { ref } from "vue";
import About from '@/layouts/About.vue'
const desc = ref<string[]>(['terrible', 'bad', 'normal', 'good', 'wonderful']);
const value = ref<number>(3);

const activekey = ref(0);
const tagList = [
  {
    name: "PDF",
    second: "图片",
  },
  {
    name: "PDF",
    second: "PPT",
  },
  {
    name: "PDF",
    second: "EXCEL",
  },
  {
    name: "PDF",
    second: "WORD",
  },
];
</script>
<style lang="scss" scoped>

.main_container {
  border-radius: 0.5rem;
  width: 100%;
  margin-top: 40px;
  border: 1px solid;
  position: relative;
  box-shadow: $boxshadow;
  @include background_color;
  @include border_color("main-btn-border-gray");
  .main_header {
    position: absolute;
    left: 0px;
    top: -39px;
    z-index: 2;
    ul {
      overflow: hidden;
      border-radius: 8px;
      padding: 0;
      margin: 0px;
      border-bottom-left-radius: unset;
      border-bottom-right-radius: unset;
      font-size: 12px;
      li {
        list-style: none;
        letter-spacing: 2px;
        line-height: 19px;
        padding: 10px 18px;
        cursor: pointer;
        border-right: 1px solid transparent;
        @include font_color("btn-font-light");
        @include border_color("main-btn-border-gray");
        @include background_color("main-btn-bg-light");
        &:last-child {
          border-right: unset;
        }
        &.active {
          font-size: 14px;
          @include font_color("main-btn-font-active");
          @include background_color("main-btn-bg-active");
        }
      }
      @include flex_row(row nowrap, center);
    }
  }
  .main_content {
    padding: 0px;
    height: 360px;
    .row_style{
      height: 100%;
    }
    .btn_blue_style{
      @include background_color("main-btn-bg-blue");
    }
    .upload_tool{
      height: 100%;
      width: 100%;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
      @include background_color("main-index-tool-bg");
      @include flex_row(column nowrap, space-between,center);
      .top_block{
        flex: 1 1 auto;
        width: 100%;
        :deep(.ant-divider-inner-text){
          font-size: 12px;
          @include font_color("main-btn-bg-light");
        }
        @include flex_row(column nowrap, center,center);
      }
      .good_num{
        margin-bottom: 20px;
        @include font_color("main-upload-text");
        :deep(.ant-statistic-title),
        :deep(.ant-statistic-content){
          @include font_color("main-upload-text");
        }
      }
      .action_btn{
        width: 100%!important;
        line-height: 60px;
        height: 60px;
        padding: 0;
        border-radius: 0px;
        border-bottom-right-radius: 6px;
      }
      .avatar_group_box{
        width: 80%;
        margin-bottom: 20px;
        @include flex_row(column nowrap, center,center);
        .ant-divider{
          :deep(.ant-divider-inner-text){
            @include font_color("main-upload-text");
          }
        }
      }
    }
    .upload_wrapper{
      display: block !important;
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      border-radius: 0px !important;
      border: unset !important;
      :deep(.ant-upload-drag){
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
        border-top-left-radius: 0px !important;
        border: 0px solid !important;
        @include border_color("main-btn-border-gray");
        @include background_color("upload-bg")
      }
      :deep(.ant-upload .ant-upload-btn){
        @include flex_row(column nowrap, center,center);
      }
      :deep(.ant-upload-text){
        margin-bottom: 20px;
        @include font_color('main-upload-text')
      }
      .ant-upload-drag-icon{
        font-size: 56px;
        @include font_color('main-upload-text')
      }
    }
  }
  .banner {
    position: relative;
    left: 50%;
    width: 50%;
    background-color: rgba($color: #d0bfff, $alpha: 0.2);
    img {
      position: absolute;
      right: 0%;
      bottom: 0;
      top: -20%;
      height: 100%;
    }
  }
}
</style>
